$(() => {
    // 获取url上的id 
    // 发送请求获取单个商品信息 
    function loadHeader() {
        return new Promise((resolve, reject) => {
            $("#header").load('./template/header.html', function () {
                resolve()
            })
        })
    }
    function getData() {
        return new Promise((resolve, reject) => {
            // 发送请求获取当前商品的信息
            $.get("/lession05/getDataById", { id: obj.id }, (data) => {
                resolve(data);
            })
        })
    }

    // 获取url
    // a=1&b=2&c=3 => {a: 1, b: 2, c: 3}
    var obj = {};
    var arr = location.search.slice(1).split("&");
    for (var i = 0; i < arr.length; i++) {
        var key = arr[i].split("=")[0]
        var value = arr[i].split("=")[1]
        obj[key] = value;
    }

    var p = loadHeader()
    p.then(() => {
        return getData()
    })
        .then((data) => {
            console.log(data)
            // 获取元素介绍信息
            let $introduce = $("#introduce");
            console.log(data.data.goods_introduce)
            $introduce.html(data.data.goods_introduce)

            $("#detail").html(`
            <div class="col-4" id="zoom">
                <section>
                    <div id="box" class="box"></div>
                    <img src="${data.data.goods_big_logo}" alt="">
                    <div id="big" class="big">
                        <img id="img" src="${data.data.goods_big_logo}" alt="">
                    </div>
                </section>
            </div>
            <div class="col-8 pro-info">
                <h3 class="pro-title">${data.data.goods_name}</h3>
                <div class="pro-price">
                价格：<span class="text-danger">¥${data.data.goods_price}</span>
                </div>
                <div class="pro-address">
                配送至：
                <div class="pro-add">
                    <span>山东青岛市市北区敦化路街道</span><span class="arrow">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                        <path
                        d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
                    </svg>
                    </span>
                    <div class="panel">
                        <div class="list">
                            <div id="select" class="select"></div>
                        </div>
                    </div>
                    <div class="join-cart">
                        <a href="#" class="btn btn-primary">加入购物车</a>
                    </div>
                </div>
                </div>
            </div>
            
            `)


            // 获取元素
            var box = document.getElementById("box");
            var sec = document.querySelector("section");
            var img = document.getElementById("img");
            var big = document.getElementById("big");
            // 获取sec元素到页面两边的距离
            var obj = offset(sec)
            console.log(obj)
            // 定义比例
            var r = 800 / 350;
            // 鼠标进入
            sec.onmouseenter = function () {
                // 显示两个元素
                box.style.display = "block";
                big.style.display = "block"
            }
            sec.onmouseleave = function () {
                box.style.display = "none";
                big.style.display = "none"
            }

            // 添加移动事件
            sec.onmousemove = function (e) {



                // 获取鼠标在元素内的位置可以使用 e.offsetX, e.offsetY 但是它们会被子元素影响 
                // console.log(e.offsetX, e.offsetY)
                // box.style.left = e.offsetX + "px";
                // box.style.top = e.offsetY + "px"

                // 另想别的办法获取鼠标到元素的位置 
                // 如果知道鼠标到页面的距离  如果知道元素到页面的距离 就能计算出鼠标到元素的距离
                var resultX = e.pageX - obj.left - box.clientWidth / 2;
                var resultY = e.pageY - obj.top - box.clientHeight / 2;
                if (resultX < 0) {
                    resultX = 0;
                } else if (resultX > sec.clientWidth - box.clientWidth) {
                    resultX = sec.clientWidth - box.clientWidth
                }

                if (resultY < 0) {
                    resultY = 0
                } else if (resultY > sec.clientHeight - box.clientHeight) {
                    resultY = sec.clientHeight - box.clientHeight
                }
                box.style.left = resultX + "px";
                box.style.top = resultY + "px";
                img.style.left = -resultX * r + "px";
                img.style.top = -resultY * r + "px"


            }



            // 如果有一个函数能够帮助我们计算一个元素到页面两边的距离的话 
            function offset(ele) {
                // 定义一个对象 这个对象有两个属性 left top 
                var obj = {
                    // // 为了去掉一开始的元素的自身边框 我们就记录为负数 
                    // left: -ele.clientLeft,
                    // top: -ele.clientTop

                    left: 0,
                    top: 0
                }
                // 一开始记录ele的自身边框
                // code...
                // 逻辑就是一层一层的累加
                while (ele != document.body) {
                    console.log(ele)
                    obj.left += ele.offsetLeft + ele.clientLeft
                    obj.top += ele.offsetTop + ele.clientTop
                    ele = ele.offsetParent;
                }



                // 最后返回这个对象就可以了
                return obj;
            }


            // 一开始就隐藏select元素
            $('#select').hide();

            /* ------------------------------------------ >
            * 配置项
            * text:提示词; 默认'请选择区域'
            * expandTrigger: click | mouseover; 默认click
            * style: jQuery改变css方式
            */
            // 当鼠标进入选择区域的地方的时候 下拉框显示出来
            $(".pro-add span").mouseenter(function () {
                $("#select").show();
            })
            $(".pro-add").mouseleave(function () {
                console.log("shubiao likaile ")
                $("#select").hide();
            })
            let options = {
                width: '300px',
                height: '50px',
                color: 'red',
                borderColor: 'red',
                text: '省市区选择',
                expandTrigger: 'mouseover',
            }
            // 初始化 select
            $('#select').Select(res => {
                console.log(JSON.stringify(res)); //  res 返回已选择区域信息
                // 这个函数是选择完毕之后触发的回调函数
                // res是select的作者提供的省、市、区的信息
                $('.pro-add span').eq(0).html((res.province.name || "") + (res.city.name || "") + (res.area.name || ""))
            }, options)

        })

})